import BaseChart from '@/components/echarts/BaseChart';
import type { EChartsOption, RadarComponentOption } from 'echarts';
import * as echarts from 'echarts/core';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';


const CmpRadarChart = ({ store }: { store: StoreInfo }) => {

  const {
    annualData: {
      avgCustomerValue = 0,
      rating = '',
      reviews: { positive = 0, negative = 0 } = {},
      yearAmount = 0,
      yearGrowth = ''
    } = {}
  } = store || {};

  const dataValue = [
    yearAmount,
    Number.parseFloat(yearGrowth),
    avgCustomerValue,
    rating,
    (positive / (positive + negative)).toFixed(2).toString()
  ];

  const indicator = [
    { name: '年营业额(元)', max: 30000000 },
    { name: '增长率(%)', max: 15 },
    { name: '客单价(元)', max: 90 },
    { name: '评分(5.0)', min: 2, max: 5 },
    { name: '好评率(%)', min: 0.5, max: 1 },
  ];

  // 类型安全的雷达图配置
  const radarConfig: RadarComponentOption = {
    center: ["50%", "50%"],
    radius: "65%",
    indicator: indicator,
    splitNumber: 4,
    splitArea: {
      areaStyle: {
        color: ['rgba(22,93,255,0.1)', 'rgba(22,93,255,0.2)'] as const, // 添加类型断言
      }
    },
    axisLine: {
      lineStyle: {
        color: "rgba(87,145,207,1)",
        width: 1
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(76,189,255,0.5)',
        width: 1,
      }
    },
    axisName: {
      show: true,
      color: '#fff',
      fontSize: 12,
      formatter: (name?: string) => name || '' // 符合类型签名的formatter
    }
  };
  const options: EChartsOption = {
    backgroundColor: '',
    border: 'none',
    tooltip: {
      trigger: "item",
      backgroundColor: 'rgb(40, 40, 45)',
      borderColor: '#333',
      textStyle: {
        color: '#fff'
      },
      z: 100, // 设置全局最高层级
      appendToBody: true // 强制将 tooltip 渲染到 body 末尾
    },
    radar: radarConfig,

    series: [{
      type: "radar",
      symbol: "none",
      lineStyle: {
        color: 'rgba(87,145,207,1)',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(76,189,255,0.3)' },
            { offset: 1, color: 'rgba(76,189,255,0.8)' }
          ]
        ),
        shadowBlur: 12,
        shadowColor: 'rgba(76,189,255,0.3)'
      },
      data: [{
        value: dataValue,
        name: '五维评分',
        label: {
          show: true,
          formatter: '{c}%',
          color: '#fff'
        }
      }]
    }]
  };

  return (
    <div style={{ width: "100%", height: '25vh' }}>
      <BaseChart option={options} />
    </div>
  );
};

export default CmpRadarChart;